/*
* @Author: Choisaaaa
* @Date: 2018/5/3  11:05
* 加载用户类表组件
*/

import React from "react";
import {Link} from "react-router-dom";

import "./user-list.scss";
import Footer from "component/footer/footer.jsx";
import PageTitle from 'component/page-title/page-title.jsx';
import Pagination from 'util/pagination/pagination.jsx';
import ListSearch from 'page/user-list/user-list-search.jsx';
import TableList from 'util/table-list/table-list.jsx';
import MUtil from 'util/mm.jsx'
import User from 'service/user-service.jsx'

const _mm = new MUtil();
const _user = new User();

class UserList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            pageNum : 1,        //分页的启始页
            list : [],          //这里需要定义list为数据，否则后面无法使用map函数
            listType : "list"
        };
    }
    componentDidMount(){
        this.loadUserList();
    }
    loadUserList() {
        let listParam = {
            listType : this.state.listType,
            pageNum : this.state.pageNum
        };
        if(this.state.listType === "search"){
            listParam.searchType = this.state.searchType;
            listParam.keyword = this.state.searchKeyWord;
        }
       _user.getUserList(listParam).then(res =>{
           this.setState(res);
           /*this.setState({
               searchKeyWord : ""
           });*/
        },err => {
            this.setState({
               list: []
            });
            _mm.errorTips(err)
        });

    }
    onPageNumChange(pageNum){//更新页数
        this.setState({
            pageNum : pageNum
        },() => {
            this.loadUserList();//重新渲染
        });
    }
    onSetUserEnableStatus(e,userId,currentStatus){//改变用户状态
        let newStatus = currentStatus == 0 ? 1 : 0;
        let tipsMsg =  currentStatus == 0 ? "确定要恢复该用户吗？" : "确定要拉黑该用户吗？";
        if (window.confirm(tipsMsg)){
            var remark = "";
            if(newStatus === 0){
               remark = window.prompt("请输入拉黑的原因");
                if(remark ==""){
                    _mm.errorTips("输入的原因不能为空！")
                    return
                }
            }
            _user.updateStatus({
                userId : userId,
                newStatus : newStatus,
                remark : remark
            }).then((err) =>{
                _mm.errorTips(err);
                this.loadUserList();
            },(errMsg)=>{
                _mm.errorTips(errMsg);
            });
        }
    }
    onSearch(searchType, searchKeyword){  // 搜索按钮的事件
        let listType = searchKeyword === '' ? 'list' : 'search'; //searchKeyword有值时搜索显示列表
        this.setState({
            listType : listType,
            pageNum  : 1, //搜索时重置页数1
            searchType   : searchType,
            searchKeyWord  : searchKeyword
        }, () => {
            this.loadUserList();
        });
    }
    render(){
        let tableHeader = [
            {name : "用户ID" ,width : "8%"},
            {name : "用户名" ,width : "10%"},
            {name : "身份" ,width : "8%"},
            {name : "邮箱" ,width : "17%"},
            {name : "电话" ,width : "15%"},
            {name : "注册时间" ,width : "20%"},
            {name : "成为会员（天）" ,width : "10%"},
            {name : "操作" ,width : "25%"},
        ];
        let ListBody = this.state.list.map((user,index)=>{
            return(
                <tr key={index}>
                    <td>{user.userId}</td>
                    <td>{user.username}</td>
                    <td>{user.roleDes}</td>
                    <td>{user.email}</td>
                    <td>{user.phone}</td>
                    <td>{user.lastEditTime}</td>
                    <td className="total-days">{user.totalDays} </td>
                    <td>{user.enableStatus ==0 ? "已经拉黑" : "正常用户"}
                        {
                            user.enableStatus ==0
                            ? <button className="btn btn-xs btn-success"
                                      onClick={(e) => {this.onSetUserEnableStatus(e, user.userId, user.enableStatus)}}>
                                恢复
                            </button>
                            :<button className="btn btn-xs btn-danger"
                                         onClick={(e) => {this.onSetUserEnableStatus(e, user.userId, user.enableStatus)}}>
                                拉黑
                            </button>
                        }

                    </td>
                </tr>
            )
        });
        return (
            <div id="page-wrapper">
                <PageTitle title="用户管理"/>
                <ListSearch onSearch = {(searchType, searchKeyword) => {this.onSearch(searchType, searchKeyword)}}/>

                <TableList tableHeads={tableHeader}>
                    {ListBody}
                </TableList>

                <Pagination current={this.state.pageNum}
                            total={this.state.total}
                            onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
                <Footer/>
            </div>
        );
    }
}

export default UserList;